import { View } from '@tarojs/components';
import classNames from 'classnames';
import React from 'react';
import styles from './index.module.scss';

const skipFormatter = (v) => {
  return v;
};

const timeFormatter = (value) => {
  if (value === undefined || value === null) {
    return null;
  }

  return `${value}`.padStart(2, '0');
};

const DayItem = ({ active, value, delimiter, formatter = skipFormatter }) => {
  if (value === undefined || value === null) {
    return null;
  }

  return (
    <>
      <View
        className={classNames('countdown-item countdown-day-item', {
          customePageBackgroundStyle: active,
        })}
      >
        {formatter(value)}
      </View>
      {delimiter && (
        <View
          className={classNames('countdown-delimiter countdown-day-delimiter', {
            customePageStyle: active,
          })}
        >
          {delimiter}
        </View>
      )}
    </>
  );
};

const Item = ({ active, value, delimiter, formatter = timeFormatter }) => {
  if (value === undefined || value === null) {
    return null;
  }

  return (
    <>
      <View
        className={classNames('countdown-item ', {
          customePageBackgroundStyle: active,
        })}
      >
        {formatter(value)}
      </View>
      {delimiter && (
        <View
          className={classNames('countdown-delimiter', {
            customePageStyle: active,
          })}
        >
          {delimiter}
        </View>
      )}
    </>
  );
};

function parse(key, value, formatter, delimiter) {
  if (typeof value === 'object') {
    return {
      [key]: {
        formatter: formatter[key],
        delimiter: delimiter[key],
        ...value,
      },
    };
  }

  return {
    [key]: {
      value,
      formatter: formatter[key],
      delimiter: delimiter[key],
    },
  };
}

function parseInput({ day, hour, minute, second, status, formatter, delimiter }) {
  if (status) {
    ({ day, hour, minute, second } = status);
  }

  formatter = {
    day: skipFormatter,
    hour: timeFormatter,
    minute: timeFormatter,
    second: timeFormatter,
    ...formatter,
  };

  delimiter = { day: '天', hour: ':', minute: ':', second: undefined, ...delimiter };

  return {
    ...parse('day', day, formatter, delimiter),
    ...parse('hour', hour, formatter, delimiter),
    ...parse('minute', minute, formatter, delimiter),
    ...parse('second', second, formatter, delimiter),
  };
}

/**
 *
默认值:
    formatter: { day: skipFormatter, hour: timeFormatter, minute: timeFormatter, second: timeFormatter }
    delimiter: { day: '天', hour: ':', minute: ':', second: undefined }

输入的 Interface:
- {
    day?, hour?, minute?, second?, formatter?, delimiter?
  }

- {
    day: { value, formatter, delimiter },
    hour: { value, formatter, delimiter },
    minute: { value, formatter, delimiter },
    second: { value, formatter, delimiter },
  }

- {
    status: { day, hour, minute, second },
    formatter:  { day: noopFormat, hour: formatTime, minute: formatTime, second: formatTime },
    delimiter: { day: '天', hour: ':', minute: ':', second: undefined }
  }

 */
const CountDown = ({ active, ...params }) => {
  const { day, hour, minute, second } = parseInput(params);

  return (
    <View className={styles.CountDown}>
      <DayItem {...day} active={active} />

      <Item {...hour} active={active} />
      <Item {...minute} active={active} />
      <Item {...second} active={active} />
    </View>
  );
};

export default CountDown;
